<!DOCTYPE html>
<html>
<head>
  <title>XML课程进度网站</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="logo.svg">
  <!-- import CSS -->
  <link rel="stylesheet" href="xml.css" type="text/css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
  <body>
  <div id="app">
      <div class="member">
        <el-card class="user-info">
          <div style="text-align:center; margin-bottom:10px;">
            <el-avatar :size="120" :src="logo"></el-avatar>
          </div>
          <div>
            <p style="font-weight:bold;font-size:20px;margin-bottom:5px">XML学习小组</p>
            <p style="color:gray; font-size:15px">使用平台: VSCode</p>
            <p style="color:black; font-size:15px">小组成员:张晓铮，叶宏庭</p>
            <p style="color:black; font-size:15px">组长:张晓铮</p>
          </div>
        </el-card>
        <el-card class="user-info">
          <div style="text-align:center; margin-bottom:10px;">
            <el-avatar :size="120" :src="avatar1"></el-avatar>
          </div>
          <div>
            <p style="font-weight:bold;font-size:20px;margin-bottom:5px">张晓铮</p>
            <p style="color:gray; font-size:15px">组长</p>
            <p style="color:black; font-size:15px">一卡通号: 213181729</p>
            <p style="color:black; font-size:15px">学号: 71118313</p>
          </div>
        </el-card>
        <el-card class="user-info">
          <div style="text-align:center; margin-bottom:10px;">
            <el-avatar :size="120" :src="avatar2"></el-avatar>
          </div>
          <div>
            <p style="font-weight:bold;font-size:20px;margin-bottom:5px">叶宏庭</p>
            <p style="color:gray; font-size:15px">组员</p>
            <p style="color:black; font-size:15px">一卡通号: 213182964</p>
            <p style="color:black; font-size:15px">学号: 71118415</p>
          </div>
        </el-card>
      </div>
      <div class="process">
          <el-timeline>
            <el-timeline-item timestamp="2021/3/6" placement="top">
              <el-card>
                <h4>实验0-1</h4>
                <p>
                    (1)选定主题：动漫/电影/音乐/图片<br/>
                    (2)确定小组选定的主题案例信息的内容是什么，确定元素、属性、实体等数据，以及数据间的结构关系。<br/>
                    (3)建立案例信息模型<br/>
                    (4)完成描述小组与小组成员信息的XML文档，确保文档是“良好的”。</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/3/15" placement="top">
              <el-card>
                <h4>实验1-1 1-2</h4>
                <p>
                    修订案例信息模型，完成案例信息的XML文档，确保文档是“良好的”。注：每组至少20条数据/每人至少10条<br/>
                    针对案例信息模型和XML文档，编写校验所需的DTD文档，确保XML文档是“有效的”。
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/3/23" placement="top">
              <el-card>
                <h4>实验1-3</h4>
                <p>为XML文档创建Schema，确保文件格式是良好的</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/4/4" placement="top">
              <el-card>
                <h4>实验2-1</h4>
                <p>为XML文档分别创建CSS和XSL文档并显示<br/>创建小组网站<br/>创建小组logo，分为手工和软件生成</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/4/12" placement="top">
              <el-card>
                <h4><a href="./xml/new_movies.xml">实验2-2</a></h4>
                <p>
                  (1)扩展XML信息模型.<br/>
                  扩展数据类型，满足查询需求,例如按名称、时间、日期、数字、价格或评分等各种数据的查询数据。<br/>
                  (2)利用XQuery技术,编写XQuery查询语句，对案例中所有数据，完成以下查询需求。<br/>
                  [1]至少进行三种不同的分类排序，且选择前10条数据和后5条数据， 输出为新的xm|文档qs1.xml, qs2.xml, qs3.xml.<br/>
                  [2]各小组自行定义三种不同的特别组合条件,分别进行查询,输出为新的xm|文档qc1.xml, qc2.xml, qc3.xml。<br/>
                  [3]显示上述查询结果文档中的数据。<br/>
                  注1:显示方式，可以是网页形式，也可以xml文档形式。<br/>
                  [4]对[]和[2]的6个查询结果文档,新设计-个信息模型,进行部分选择与合并,重新构建为-个新的xml文档query.xml。<br/>
                  [5]按新的信息模型，在小组网站中显示query.xm|文档数据。<br/>
                  注2:可以直接利用XQuery直接完成查询语句编写，也可以使用JAVA作为属主语言，实现查询语句编写。<br/>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
      </div>
  </div>
  <body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
          return {
              avatar1: "./avatar1.jpg",
              avatar2: "./avatar2.jpg",
              logo: "./logo.svg"
          }
      }
    })
  </script>
</html>